<!doctype html>
<head>
  <title>CSS OM: CSS Values</title>
  <link rel="author" title="Divya Manian" href="mailto:manian@adobe.com">
  <link rel="help" href="http://www.w3.org/TR/cssom/#the-cssrulelist-sequence">
  <meta name="flags" content="dom">
  <meta name="assert" content="Testing Serialization of Style Rules">
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
  <style id="s-0">
    @namespace svg "http://www.w3.org/2000/svg"; 
  </style>
  <style id="s-1">
    @import url('main.css');  
  </style>
  <style id="s-2">  
    h1 { background: indianred; }
  </style>    
  <style id="s-3">
    @namespace svg "http://www.w3.org/2000/svg"; 
    svg|a { color: white; } 
  </style>
  <style id="s-4">
    @font-face {
      font-family: 'Megalopolis';
      src: url('fonts/megalopolisextra-webfont.eot');
      src: url('fonts/megalopolisextra-webfont.eot?#iefix') format('embedded-opentype'),
           url('fonts/megalopolisextra-webfont.woff') format('woff'),
           url('fonts/megalopolisextra-webfont.ttf') format('truetype'),
           url('fonts/megalopolisextra-webfont.svg#MEgalopolisExtraRegular') format('svg');
      font-weight: normal;
      font-style: normal;
    } 
  </style>
  <style id="s-5">
    @media (min-width: 200px) {
        h1 { background: aliceblue; }
    }
  </style>
  <style id="s-6">
    @page :first {
        h1 { color: #444; }
    }
  </style>
</head>         
<body>
    <div id="log"></div>    
    <script>
    var stylesheets = document.styleSheets;
    var ruletypes = {
      1: 'Style Rule',
      3: '@import rule', 
      4: 'media rule',
      5: '@font-face rule',
      6: 'page rule',
      10: 'Namespace rule',
      11: 'unrecognized rule'
    };

    var types = {
      's-0': '@namespace svg "http://www.w3.org/2000/svg"',
      's-1': '@import url("main.css")',
      's-2': 'h1',
      's-3': 'svg|a',
      's-4': '@font-face',
      's-5': '@media (min-width: 200px)',
      's-6': '@page :first'
    }

   var ruleOrder = [10, 3, 1, 1, 5, 4, 6]; 

    var results = [];

  
    for (i = 0; i < stylesheets.length; i++) {       
      if(i == 3) {
        cssType = stylesheets[i].cssRules.length > 0 && stylesheets[i].cssRules[1] ? stylesheets[i].cssRules[1].type : 11; 
      } else {
        cssType = stylesheets[i].cssRules.length > 0 ? stylesheets[i].cssRules[0].type : 11; 
      }
        
        results.push([
          ruletypes[ruleOrder[i]] + ' is expected to be ' + types['s-' + i],
          ruletypes[cssType],
          ruletypes[ruleOrder[i]]
        ]);        
                
    }

    generate_tests(assert_equals, results);        
    
    </script>
 </body>
 </html>

